<div class="grid-layout layout-loose  layout-full">
  <table>

    <tr>
      <td>
        <div class="grid-layout layout-tighter">
          <table>
            <tr>
              <td width="50%" id="or-import-encoding"></td>
              <td><input bind="encodingInput"></input></td>
            </tr>
          </table>
        </div>
      </td>

      <td colspan="2">
        <div class="grid-layout layout-tighter layout-full">
          <table>
            <tr>
              <td style="text-align:end" width="1%"><button class="button" bind="previewButton"></button></td>
            </tr>
            <tr>
              <td style="text-align:end" width="1%">
                <input type="checkbox" bind="disableAutoPreviewCheckbox" id="$disable" />
                <label for="$disable" id="or-disable-auto-preview"></label>
              </td>
            </tr>
          </table>
        </div>
      </td>
    </tr>

    <tr>
      <td>
        <div class="grid-layout layout-tightest">
          <table>
            <tr>
              <td colspan="2" id="or-import-colsep"></td>
            </tr>
            <tr>
              <td width="1%"><input type="radio" name="column-separator" value="comma" id="$column-separator-comma" />
              </td>
              <td><label for="$column-separator-comma" id="or-import-commas"></label></td>
            </tr>
            <tr>
              <td width="1%"><input type="radio" name="column-separator" value="tab" id="$column-separator-tab" /></td>
              <td><label for="$column-separator-tab" id="or-import-tabs"></label></td>
            </tr>
            <tr>
              <td width="1%"><input type="radio" name="column-separator" value="custom" id="$column-separator-custom" />
              </td>
              <td>
                <label for="$column-separator-custom" id="or-import-custom"></label>
                <input bind="columnSeparatorInput" spellcheck="false" type="text" class="lightweight" size="5" />
              </td>
            </tr>
            <tr>
              <td><br /></td>
            </tr>
            <tr>
              <td>
                <input type="checkbox" bind="processQuoteMarksCheckbox" id="$quotes" />
              </td>
              <td>
                <label for="$quotes" id="or-import-quote"></label>
                <input bind="quoteCharacterInput" spellcheck="false" type="text" class="lightweight" maxlength="1" size="2" value="&quot;"
                  id="$quoteCharacter" />
                <label for="$quoteCharacter" id="or-import-quote-character"></label>
              </td>
            </tr>
            <tr>
              <td width="1%"><input type="checkbox" bind="trimStringsCheckbox" id="$trim" /></td>
              <td><label for="$trim" id="or-import-trim"></label></td>
            </tr>
            <tr>
              <td colspan="2" id="or-import-escape"></td>
            </tr>
          </table>
        </div>
      </td>
      <td>
        <div class="grid-layout layout-tightest">
          <table>
            <tr>
              <td width="1%">
                <input type="checkbox" bind="ignoreCheckbox" id="$ignore" />
              </td>
              <td width="100px">
                <label for="$ignore" id="or-import-ignore"></label>
              </td>
              <td>
                <input bind="ignoreInput" type="number" class="lightweight" size="7" value="0" />
                <label for="$ignore" id="or-import-lines"></label>
              </td>
            </tr>
          </table>

          <table style="margin-top:1em">
            <tr>
              <td width="1%">
                <input type="radio" bind="headerLinesCheckbox" id="$headers" />
              </td>
              <td width="100px">
                <label for="$headers" id="or-import-parse"></label>
              </td>
              <td>
                <input bind="headerLinesInput" type="number" class="lightweight" size="7" value="1" />
                <label for="$headers" id="or-import-header"></label>
              </td>
            </tr>
            <tr margin-top="1em">
              <td width="1%">
                <input type="radio" bind="columnNamesCheckbox" id="$check-column-names" />
              </td>
              <td colspan="2"><label id="or-import-columnNames"></label></td>
            </tr>
            <tr>
              <td colspan="3"><input style="width:25vw;" bind="columnNamesInput" /></td>
            </tr>
          </table>

          <table style="margin-top:1em;">
            <tr>
              <td width="1%">
                <input type="checkbox" bind="skipCheckbox" id="$skip" />
              </td>
              <td width="100px"><label for="$skip" id="or-import-discard"></label></td>
              <td>
                <input bind="skipInput" type="number" class="lightweight" size="7" value="0" />
                <label for="$skip" id="or-import-rows"></label>
              </td>
            </tr>
            <tr>
              <td width="1%">
                <input type="checkbox" bind="limitCheckbox" id="$limit" />
              </td>
              <td><label for="$limit" id="or-import-load"></label></td>
              <td>
                <input bind="limitInput" type="number" class="lightweight" size="7" value="0" />
                <label for="$limit" id="or-import-rows2"></label>
              </td>
            </tr>
          </table>
        </div>
      </td>
      <td>
        <div class="grid-layout layout-tightest">
          <table>
            <tr>
              <td width="1%"><input type="checkbox" bind="guessCellValueTypesCheckbox" id="$guess" /></td>
              <td colspan="2"><label for="$guess" id="or-import-parseCell"></label>
              </td>
            </tr>
            <tr>
              <td width="1%"><input type="checkbox" bind="storeBlankRowsCheckbox" id="$store-blank-rows" /></td>
              <td colspan="2"><label for="$store-blank-rows" id="or-import-blank"></label>
              </td>
            </tr>

            <tr>
              <td width="1%"><input type="checkbox" bind="storeBlankCellsAsNullsCheckbox" id="$store-blank-cells" />
              </td>
              <td colspan="2"><label for="$store-blank-cells" id="or-import-null"></label></td>
            </tr>

            <tr>
              <td width="1%"><input type="checkbox" bind="includeFileSourcesCheckbox" id="$include-file-sources" /></td>
              <td><label for="$include-file-sources" id="or-import-source"></label></td>
            </tr>
            <tr>
              <td width="1%"><input type="checkbox" bind="includeArchiveFileCheckbox" id="$include-archive-file" /></td>
              <td><label for="$include-archive-file" id="or-import-archive"></label></td>
            </tr>
          </table>
        </div>
      </td>
    </tr>

  </table>
</div>